<template>
  <div class="product-detail">
    <!-- 头部区域 -->
    <header class="detail-nav" ref="header">
      <i class="iconfont icon-left" @click="goBack"></i>
      <div class="nav-list">
        <span
          :class="{ active: navIndex === 0 }"
          data-type="product"
          @click="scrollToView($event)"
        >
          <i class="iconfont icon-location" v-show="navIndex === 0"></i>商品
        </span>
        <span
          :class="{ active: navIndex === 1 }"
          data-type="detail"
          @click="scrollToView($event)"
        >
          <i class="iconfont icon-location" v-show="navIndex === 1"></i>商品详情
        </span>
        <span
          :class="{ active: navIndex === 2 }"
          data-type="recommend"
          @click="scrollToView($event)"
        >
          <i class="iconfont icon-location" v-show="navIndex === 2"></i>商品推荐
        </span>
      </div>
      <i class="iconfont icon-More"></i>
    </header>

    <!-- 轮播图 -->
    <section class="product-focus" ref="focus">
      <van-swipe
        :autoplay="3000"
        indicator-color="white"
        class="swiper-container"
      >
        <van-swipe-item v-for="(images, index) in sliderImageList" :key="index">
          <img :src="images.imgUrl" class="swiper_img" alt="" />
        </van-swipe-item>
      </van-swipe>
    </section>

    <!-- 详情信息 -->
    <section class="detail-info" ref="info">
      <p class="detail-info-name">
        {{ productDetail.name }}
      </p>
      <p class="detail-info-subtitle">{{ productDetail.subtitle }}</p>
      <div>
        <span class="detail-info-price">￥{{ productDetail.price }}</span>
        <span class="detail-info-stock">库存{{ productDetail.stock }}件</span>
      </div>
    </section>

    <!-- 商品详情 -->
    <section class="detail-content" ref="detailContent" id="content">
      <p class="detail-gap"></p>
      <ul>
        <li>概述</li>
        <li>参数</li>
        <li>安装服务</li>
        <li>常见问题</li>
      </ul>
      <div v-html="productDetail.detail"></div>
    </section>

    <!-- 底部购物车购买 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :info="this.$store.getters.goodsCP.allCount"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addToCar"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="id"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
      @stepper-change="onStepperChange"
    />
  </div>
</template>

<script>
import { getProductDetail, cartAdd } from "../../api/axios";
export default {
  name: "product-detail",
  data() {
    return {
      id: this.$route.query.id,
      navIndex: 0, //导航索引
      productDetail: {}, // 保存详情数据
      sliderImageList: [], // 保存轮播图数据
      top: "", //视图到顶部的距离
      show: false,
      count: 1,
      sku: {},
      goods: {
        // 商品标题
        title: "测试商品",
        // 默认商品 sku 缩略图
        picture:
          "http://img.happymmall.com/570186f3-c0d2-4336-a1b7-3e1aff88f73a.jpg",
      },
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    scrollToView(e) {
      let $type = e.target.getAttribute("data-type");
      switch ($type) {
        case "product":
          this.navIndex = 0;
          window.scrollTo(0, 0);
          break;
        case "detail":
          this.navIndex = 1;
          window.scrollTo(0, this.top);
          break;
        case "recommend":
          this.navIndex = 2;
          window.scrollTo(0, 0);
          break;
      }
    },
    onBuyClicked() {
      console.log("onBuyClicked");
    },
    onAddCartClicked() {
      console.log("onAddCartClicked");
      const params = {
        productId: this.id,
        count: this.count,
      };
      // console.log(params);
      cartAdd(params).then((res) => {
        // console.log(res);
        if (res.status == 0) {
          this.$router.push("/shopcart");
        } else {
          this.$Toast(res.msg);
        }
      });
    },
    addToCar() {
      console.log("点击了", this.productDetail);
      let imageList = this.productDetail.subImages.split(",");
      // console.log(imageList);
      // let imgUrl = this.productDetail.imageHost
      (this.sku = {
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            v: [
              {
                id: "001", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl: this.productDetail.imageHost + imageList[0], // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: this.productDetail.imageHost + imageList[0], // 用于预览显示的规格类目图片
              },
              {
                id: "002",
                name: "蓝色",
                imgUrl: this.productDetail.imageHost + imageList[1],
                previewImgUrl: this.productDetail.imageHost + imageList[1],
              },
            ],
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          },
        ],
        list: [
          {
            id: this.productDetail.categoryId, // skuId，下单时后端需要
            price: this.productDetail.price * 100, // 价格（单位分）
            s1: "001", // 规格类目 k_s 为 s1 的对应规格值 id
            stock_num: Number(this.productDetail.stock), // 当前 sku 组合对应的库存
          },
          {
            id: this.productDetail.categoryId, // skuId，下单时后端需要
            price: this.productDetail.price * 100, // 价格（单位分）
            s1: "002", // 规格类目 k_s 为 s1 的对应规格值 id
            stock_num: Number(this.productDetail.stock), // 当前 sku 组合对应的库存
          },
        ],
        price: this.productDetail.price, // 默认价格（单位元）
        stock_num: Number(this.productDetail.stock), // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
      }),
        (this.goods.picture = this.productDetail.imageHost + imageList[0]);
      this.show = true;
    },
    onStepperChange(value) {
      this.count = value;
    },
  },
  created() {
    //请求详情页数据
    getProductDetail(this.id).then((dataList) => {
      let res = dataList.data;
      if (dataList.msg === "ok") {
        this.productDetail = res;
        let subImages = res.subImages.split(",");
        let imageHost = res.imageHost;
        subImages.forEach((item) => {
          this.sliderImageList.push({
            imgUrl: imageHost + item,
          });
        });
      } else {
        this.$Toast.fail("数据出错");
      }

      // console.log(this.productDetail, this.sliderImageList);
    });
  },
  updated() {
    this.top = this.$refs.focus.scrollHeight + this.$refs.info.scrollHeight;
  },
};
</script>

<style lang='scss' scope>
@import "../../common/style/mixin";
.product-detail {
  width: 100%;

  .detail-nav {
    @include fj;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 88px;
    padding: 0 20px;
    line-height: 88px;
    box-sizing: border-box;
    z-index: 1000;
    color: #252525;
    background: #fff;
    border-bottom: 1px solid #dcdcdc;

    i {
      font-size: 50px;
      color: #000;
    }

    div span {
      padding: 0 20px;
      font-size: 28px;

      &.active {
        color: $red;
      }

      .iconfont {
        padding-right: 8px;
        font-size: 28px;
        color: $red;
      }
    }
  }
  //轮播图样式
  .product-focus {
    margin-top: 88px;

    .swiper-container {
      .swiper_img {
        width: 100%;
        height: 700px;
      }
    }
  }
  // 详情页样式
  .detail-info {
    width: 100%;
    padding: 20px 30px;
    font-size: 30px;
    box-sizing: border-box;

    .detail-info-name {
      font-size: 40px;
      color: #333;
    }

    .detail-info-subtitle {
      padding: 10px 0;
      font-size: 28px;
      color: #999;
    }

    div {
      @include fj;
      height: 70px;
      line-height: 80px;
      padding: 10px 0;
      font-size: 32px;
      color: #999;

      .detail-info-price {
        color: $red;
        font-size: 44px;
      }
    }
  }

  // 商品详情样式
  .detail-content {
    width: 100%;

    .detail-gap {
      width: 100%;
      height: 20px;
      background: #eee;
    }

    ul {
      @include fj;
      width: 100%;
      margin: 20px 0;

      li {
        flex: 1;
        padding: 10px 0;
        text-align: center;
        font-size: 30px;
        border-right: 1px solid #999;
        box-sizing: border-box;

        &:last-child {
          border-right: none;
        }
      }
    }

    div {
      width: 100%;
      overflow: hidden;

      p {
        width: 100%;
        font-size: 40px;
        text-align: center;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>